<template>
  <div class="mod-sys__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item label="学生姓名">
        <el-input v-model="state.dataForm.courseName" placeholder="课程名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="课程老师">
        <el-input v-model="state.dataForm.teacherName" placeholder="课程老师" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <TableWrapper
      :valueData="pageList"
      :columns="columns"
      :optrations="teacher ? optrations : ''"
      @pageSize="pageSize"
      @currentPage="currentPage"
      :pageCurrent="{...pageCurrent,total}"
    ></TableWrapper>
    <add-or-update ref="addOrUpdateRef" :teacherList="teacherList" @refreshDataList="getList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import TableWrapper from "@/components/table/TableWrapper.vue";
import AddOrUpdate from "./user-add-or-update.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";
const view = reactive({
  getDataListIsPage: true
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const total = ref("0");
const pageList = ref([]);
const pageCurrent = reactive({
  pageNum: "1",
  pageSize: 20
});
// 判断 管理员账号 老师账号 学生账号 cam:admin cam:teacher cam:student
const admin = ref(state.hasPermission("cam:admin"));
const teacher = ref(state.hasPermission("cam:teacher"));
const student = ref(state.hasPermission("cam:student"));
const columns = ref([
  {
    value: "studentName",
    label: "学生姓名"
  },
  {
    value: "courseName",
    label: "课程名称"
  },
  {
    value: "teacherName",
    label: "课程老师"
  },
  {
    value: "operationContent",
    label: "请假原因"
  },
  {
    value: "attenStatus",
    label: "审批状态"
  }
]);
const optrations = [
  {
    name: "同意",
    type: "primary",
    icon: "el-icon-plus",
    method: (columns, row) => {
      baseService
        .post("/cam/teacher/agreeLeave", {
          courseItemId: row.courseItemId
        })
        .then((res) => {
          if (res.code === 0) {
            ElMessage.success({
              message: "审批完成",
              duration: 200,
              onClose: () => {
                getList();
              }
            });
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    },
    disabled: false
  },
  {
    name: "拒绝",
    type: "primary",
    icon: "el-icon-plus",
    method: (columns, row) => {
      baseService
        .post("/cam/teacher/refuseLeave", {
          courseItemId: row.courseItemId
        })
        .then((res) => {
          if (res.code === 0) {
            ElMessage.success({
              message: "审批完成",
              duration: 200,
              onClose: () => {
                getList();
              }
            });
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    },
    disabled: false
  },
];
onMounted(() => {
  getList();
});
const getList = () => {
  let param = {
    ...pageCurrent,
    query: {
      teacherName: state.dataForm.teacherName,
      courseName: state.dataForm.courseName
    }
  };
  baseService
    .post("/cam/atten/pageLeave", param)
    .then((res) => {
      if (res.code === 0) {
        pageList.value = res.data.records;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

const pageSize = (val) => {
  pageCurrent.pageSize = val;
  getList();
};
const currentPage = (val) => {
  pageCurrent.pageNum = val;
  getList();
};
</script>